<template>
	<view class="base">
		<view class="classify">
			<!-- //顶部tab栏 -->
			<u-tabs :list="classify" :current="classifyChoice" :scrollable='false' :lineColor='classifyStyle.lineColor'
				:lineWidth='classifyStyle.lineWidth' :lineHeight='classifyStyle.lineHeight'
				:activeStyle='classifyStyle.activeStyle' :inactiveStyle='classifyStyle.inactiveStyle'
				:itemStyle='classifyStyle.itemStyle' @click="clickChoose" ref="uTab"></u-tabs>
		</view>

		<!-- 类容盒子 -->
		<swiper :duration="300" class="content" :current='classifyChoice' @change="changeChoose" @touchmove.stop="">
			<!-- 系统消息 -->
			<swiper-item>
				<view class="noMsg" v-if="JSON.stringify(pageData.officialMsg) =='[]'">
					暂时没有任何消息
				</view>
				<scroll-view :scroll-y="true" class="content-box" @touchmove.stop="">
					<view class="inside-box">
						<view v-for="(item,index) in pageData.officialMsg" :key="item.id" class="item1">
							<view class="msgtime1">
								{{item.createTime|changeTime}}
							</view>
							<view class="item-content">
								<view class="item-content-title">{{item.title}}
								</view>
								<view class="item-content-content">
									{{item.content}}
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
			</swiper-item>
			<!-- 互动消息 -->
			<swiper-item>
				<view class="noMsg" v-if="JSON.stringify(pageData.interactMsg)=='[]'">
					暂时没有任何消息
				</view>
				<view class="noMsg" v-if="!userId">
					请登录查看
				</view>
				<scroll-view :scroll-y="true" class="content-box" v-if="refreshData==1 || refreshData==-1"
					@touchmove.stop="">
					<view class="inside-box">
						<u-swipe-action>
							<!-- 风采点赞 -->
							<u-swipe-action-item v-for="(item,index) in pageData.interactMsg" :key="item.index"
								:duration='duration' @click='delMsg($event,item.id,index)' :show='true' :name='index'
								:threshold='40' :options="option.option1" :ref="'swipe'+index"
								v-if="item.messageType==1">
								<view class="item2" @click="onMienDetailed(item.showId)">
									<image class=" item2-avatar" :src="imgUrl + item.userAvatar">
									</image>
									<view class="item2-content">
										<view class="item2-content-name">{{item.userName}}</view>
										<view class="item2-content-content">赞了你的风采</view>
										<view class="item2-content-time">{{item.createTime}}</view>
									</view>
									<image :src="imgUrl + item.showFile" class="item2-img"></image>
								</view>
							</u-swipe-action-item>
							<!-- 风采评论 -->
							<u-swipe-action-item :duration='duration' @click='delMsg($event,item.id,index)' :show='true'
								:name='index' :threshold='40' :options="option.option1" :ref="'swipe'+index"
								v-else-if="item.messageType==3">
								<view class="item2" @click="onMienDetailed(item.showId)">
									<image class=" item2-avatar" :src="imgUrl + item.userAvatar">
									</image>
									<view class="item2-content">
										<view class="item2-content-name">{{item.userName}}</view>
										<view class="item2-content-content">评论了你：{{item.remarkContent}}</view>
										<view class="item2-content-time">{{item.createTime}}</view>
									</view>
									<image :src="imgUrl + item.showFile" class="item2-img"></image>
								</view>
							</u-swipe-action-item>
							<!-- 评论回复 -->
							<u-swipe-action-item :duration='duration' @click='delMsg($event,item.id,index)' :show='true'
								:name='index' :threshold='40' :options="option.option1" :ref="'swipe'+index"
								v-else-if="item.messageType==4">
								<view class="item2" @click="onMienDetailed(item.showId)">
									<image class=" item2-avatar" :src="imgUrl + item.userAvatar">
									</image>
									<view class="item2-content">
										<view class="item2-content-name">{{item.userName}}</view>
										<view class="item2-content-content">回复：{{item.remarkContent}}</view>
										<view class="item2-content-time">{{item.createTime}}</view>
									</view>
									<image :src="imgUrl + item.showFile" class="item2-img"></image>
								</view>
							</u-swipe-action-item>
							<!-- 评论点赞 -->
							<u-swipe-action-item :duration='duration' @click='delMsg($event,item.id,index)' :show='true'
								:name='index' :threshold='40' :options="option.option1" :ref="'swipe'+index" v-else>
								<view class="item2">
									<image class=" item2-avatar" :src="imgUrl + item.userAvatar">
									</image>
									<view class="item2-content">
										<view class="item2-content-name">{{item.userName}}</view>
										<view class="item2-content-content">点赞了你的评论</view>
										<view class="item2-content-time">{{item.createTime}}</view>
									</view>
									<image :src="imgUrl + item.showFile" class="item2-img"></image>
								</view>
							</u-swipe-action-item>

						</u-swipe-action>

					</view>
				</scroll-view>
			</swiper-item>
			<!-- 服务消息 -->
			<swiper-item>
				<view class="noMsg" v-if="JSON.stringify(pageData.serviceMsg) =='[]'">
					暂时没有任何消息
				</view>
				<view class="noMsg" v-if="!userId">
					请登录查看
				</view>
				<scroll-view :scroll-y="true" class="content-box" v-if="refreshData==2 || refreshData==-1"
					@touchmove.stop="">
					<view class="inside-box">
						<u-swipe-action @touchmove.stop="">
							<u-swipe-action-item v-for="(item,index) in pageData.serviceMsg" :key="item.id"
								:duration='duration' @click='delMsg($event,item.id,index)' :show='true' :name='index'
								:threshold='40' :options="option.option2" :ref="'swipe3'+index">
								<view class="item3" :class="{'all-Movement-Content' : item.IsopenSubassembly}"
									@touchstart="touchstart($event,item.id,index)"
									@touchmove="touchmove($event,item.id,index)" @touchend="touchend($event,item.id)">
									<block v-if="item.messageCategory=='退款成功'">
										<view class="item3-title">退款已到账</view>
										<view class="item3-date">{{item.byTime |changeTime1}}</view>
										<view class="item3-money">退款金额：￥{{item.refund | formatAmount}}</view>
										<view class="item3-explain">退款说明：退款——{{item.activityName}}</view>
										<view class="item3-name">退款用户：{{item.reserve2}}</view>
									</block>
									<block v-else-if="item.messageCategory=='审核成功'">
										<view class="item3-title">审核成功</view>
										<view class="item3-date">{{item.byTime |changeTime1}}</view>
										<view class="item3-comment">给一个理由</view>
									</block>
									<block v-else-if="item.messageCategory=='审核失败'">
										<view class="item3-title">审核失败</view>
										<view class="item3-date">{{item.byTime |changeTime1}}</view>
										<view class="item3-comment">给一个理由</view>
									</block>
									<block v-else>
										<view class="item3-title">支付成功</view>
										<view class="item3-date">{{item.byTime |changeTime1 }}</view>
										<view class="item3-money">支付金额：￥{{item.orderAmount | formatAmount}}</view>
										<view class="item3-mode">支付方式：微信支付</view>
										<view class="item3-name">支付用户：{{item.userName}}</view>
										<view class="item3-explain">支付说明：{{item.activityName}}</view>
										<view class="item3-comment">备注：这是备注</view>
									</block>

								</view>
							</u-swipe-action-item>
						</u-swipe-action>


					</view>
				</scroll-view>
			</swiper-item>
			<!-- 社团消息 -->
			<swiper-item>
				<view class="noMsg" v-if="JSON.stringify(pageData.clubMsg) =='[]'">
					暂时没有任何消息
				</view>
				<view class="noMsg" v-if="!userId">
					请登录查看
				</view>
				<scroll-view :scroll-y="true" class="content-box" v-if="refreshData==3 || refreshData==-1"
					@touchmove.stop="">
					<view class="inside-box">
						<u-swipe-action @touchmove.stop="">
							<u-swipe-action-item v-for="(item,index) in pageData.clubMsg" :key="item.id"
								:ref="'swipe4'+index" :duration='duration' @click.stop='delMsg($event,item.id,index)'
								:show='true' :name='index' :threshold='40' :options="option.option1">
								<view class="item4" @click="handleOnAddClub(item)">
									<image :src="item.avatar" class="item4-img">
									</image>
									<view class="item4-content">
										<view class="content-title">
											{{item.name}}
										</view>
										<view class="content-out" v-if="item.status==3">
											<view class="content-out-msg">
												已退出{{item.associationName}}
											</view>
											<view class="content-out-time">
												{{item.createTime | formatTime}}
											</view>
										</view>
										<view class="content-join" v-else>
											<view class="content-join-apply">
												申请加入{{item.associationName}}
											</view>
											<view class="content-join-apply">
												{{item.applicationReason}}
											</view>
											<button type="primary" class="agree-button" v-if="item.status==0"
												@click.stop="addClub(item.id,index)">同意</button>
											<button type="primary" class="agree-button  agree-button-click"
												v-else-if="item.status==1 || item.status==2">{{item.status==1 ? '已同意' :" 已拒绝"}}</button>
										</view>

									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		getOfficialMsgList,
		getServiceMsgList,
		getInteractMsgList,
		getClubMsgList,
		delServiceMsg,
		delInteractMsg,
		joinClub2,
		delClubMsg
	} from '@/api/myMessage/myMessage.js'
	import {
		imgUrl
	} from '@/config.js'
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userinfo').userid,
				// userId: 39,
				changedTouche: '', //开始移动X坐标
				openSubassembly: '', //当前打开组件
				IsopenSubassembly: '', //当前滑动组件开始状态
				option: {
					option1: [{
						text: ' 删除',
						style: {
							backgroundColor: '#f56c6c',
							height: '180rpx',
							width: '140rpx'
						}
					}],
					option2: [{
						text: ' 删除',
						style: {
							backgroundColor: '#f56c6c',
							marginBottom: "20rpx",
							marginTop: "2rpx",
							width: '140rpx'
						}
					}]
				},
				imgUrl: imgUrl, //图片公共路由
				pageData: { //页面数据
					officialMsg: '', // 官方通知
					interactMsg: '', //互动消息
					serviceMsg: '', //服务消息
					clubMsg: '' //社团消息
				},
				refreshData: -1, // 为-1全部展示，为具体值展示相应tab数据 
				duration: 300,
				classify: [{ //tab栏选项列表
					name: '官方通知'
				}, {
					name: '互动消息'
				}, {
					name: '服务消息'
				}, {
					name: ' 社团消息'
				}, ],
				classifyChoice: 0, //顶部tab栏选中项
				classifyStyle: { // 顶部 tab栏组件样式
					lineColor: 'rgba(16,16,16,1)',
					lineWidth: '64',
					lineHeight: '2',
					activeStyle: {
						color: ' rgba(16, 16,16, 1)',
						"font-size": '32rpx'
					},
					inactiveStyle: {
						color: 'rgba(151, 151, 151, 0.85)',
						'font-size': '32rpx'
					},
					itemStyle: {
						height: '82rpx',
						'line-height': '40rpx',
					},
				},

			};
		},
		methods: {
			//跳转加入社团申请页
			handleOnAddClub(item) {
				if (item.status != 0) return
				this.$tab.navigateTo('/pages/mine/MyMessage/addClub?data=' + JSON.stringify(item))
			},
			//tab选项点击选择展示页面
			clickChoose(e) {
				this.classifyChoice = e.index
			},
			//滑动选择展示页面
			changeChoose(e) {
				this.refreshData = -1
				setTimeout(() => {
					this.refreshData = e.detail.current
					setTimeout(() => {
						this.refreshData = -1
					}, 50)
				}, 300)
				this.classifyChoice = e.detail.current
			},
			//服务消息组件item开始滑动记录
			touchstart(e, id, index) {
				this.changedTouche = e.changedTouches[0].pageX
				this.IsopenSubassembly = this.pageData.serviceMsg[index].IsopenSubassembly
				if (this.openSubassembly != '' && this.openSubassembly != id) {
					this.pageData.serviceMsg.forEach(item => {
						if (item.id == this.openSubassembly) {
							item.IsopenSubassembly = false
						}
					})
				}
			},
			touchmove(e, id, index) {

				const changedTouche = e.changedTouches[0].pageX
				if (this.IsopenSubassembly == true) {
					if (this.changedTouche - changedTouche >= -20) {
						this.pageData.serviceMsg[index].IsopenSubassembly = true

					} else {
						this.pageData.serviceMsg[index].IsopenSubassembly = false
					}
				} else {
					if (this.changedTouche - changedTouche <= 20) {
						this.pageData.serviceMsg[index].IsopenSubassembly = false

					} else {
						this.pageData.serviceMsg[index].IsopenSubassembly = true
					}
				}


			},
			// 服务消息组件item结束滑动记录
			touchend(e, id) {
				//停止移动后的坐标
				const changedTouche = e.changedTouches[0].pageX
				if (this.changedTouche - changedTouche >= 40) {
					if (this.openSubassembly == id) return
					this.pageData.serviceMsg.forEach(item => {
						if (item.id == id) {
							item.IsopenSubassembly = true
						}
						if (this.openSubassembly != '' && this.openSubassembly == item.id && item
							.id != id) {
							item.IsopenSubassembly = false
						}

					})
					this.openSubassembly = id

				} else if (this.changedTouche - changedTouche <= -40) {
					this.pageData.serviceMsg.forEach(item => {
						item.IsopenSubassembly = false
					})
					this.openSubassembly = ''
				} else if (this.changedTouche - changedTouche > 0 && this.changedTouche - changedTouche < 40) {
					this.pageData.serviceMsg.forEach(item => {
						if (item.id == id) {
							item.IsopenSubassembly = this.IsopenSubassembly
						}
					})
					this.openSubassembly = ''
				} else if (this.changedTouche - changedTouche > -40 && this.changedTouche - changedTouche < 0) {
					this.pageData.serviceMsg.forEach(item => {
						if (item.id == id) {
							item.IsopenSubassembly = this.IsopenSubassembly
							if (this.IsopenSubassembly == true) {
								this.openSubassembly = activityId
							} else {
								this.openSubassembly = ''
							}
						}
					})
				}

			},

			//滑动删除消息
			delMsg(e, id, index) {

				//删除社团消息
				if (this.classifyChoice == 3) {
					if (this.pageData.clubMsg[index].status == 0) return this.$modal.msg('该申请暂未审核')
					const data = {
						userId: this.pageData.clubMsg[index].userId,
						position: this.pageData.clubMsg[index].position,
						associationId: this.pageData.clubMsg[index].associationId
					}
					delClubMsg(data).then(res => {
						if (res.code == 200) {
							this.duration = 0
							setTimeout(() => {
								this.$refs['swipe4' + index][0].closeHandler()
								this.pageData.clubMsg.splice(index, 1)
								this.$modal.msgSuccess('删除成功')
							}, 10)
							setTimeout(() => {
								this.duration = 300
							}, 20)
						}
					})


					//删除服务消息
				} else if (this.classifyChoice == 2) {
					const data = {
						userId: this.userId,
						id: id,
						messageCategory: this.pageData.serviceMsg[index].messageCategory
					}
					delServiceMsg(data).then(res => {
						if (res.code == 200) {
							this.duration = 0
							setTimeout(() => {
								this.$refs['swipe3' + index][0].closeHandler()
								this.pageData.serviceMsg.splice(index, 1)

								this.$modal.msgSuccess('删除成功')
							}, 10)
							setTimeout(() => {
								this.duration = 300
							}, 20)
						}
					})

					//删除互动消息
				} else if (this.classifyChoice == 1) {
					this.$modal.confirm('删除此条消息？', '提示').then(res => {
						if (res == true) {
							const message = this.pageData.interactMsg[index]
							const data = {
								messageType: message.messageType
							}
							if (message.messageType == 1) {
								data.id = message.id
								data.userId = message.userId
							} else if (message.messageType == 2) {
								data.id = message.id
								data.remarkId = message.remarkId

							} else if (message.messageType == 3) {
								data.remarkId = message.remarkId
								data.userId = message.userId
							} else if (message.messageType == 4) {
								data.remarkId = message.remarkId
								data.userId = message.userId
							}
							delInteractMsg(data).then(res => {
								if (res.code == 200) {
									this.duration = 0
									setTimeout(() => {
										this.$refs['swipe' + index][0].closeHandler()
										this.pageData.interactMsg.splice(e.name, 1)

										this.$modal.msgSuccess('删除成功')
									}, 10)
									setTimeout(() => {
										this.duration = 300
									}, 20)
								}
							})

						}
					})
				}

			},
			//跳转风采详情页
			onMienDetailed(showId) {
				this.$tab.navigateTo('/subPackages/activity/mienDetailed?showId=' + showId)
			},
			//获取页面数据列表
			getMessageList() {
				const data = {
					userId: this.userId,
				}
				//官方消息
				getOfficialMsgList().then(res => {
					if (res.code == 200) {
						this.pageData.officialMsg = res.rows
					}
				})
				//服务消息
				getServiceMsgList(data).then(res => {
					if (res.code == 200) {
						res.rows.forEach(item => {
							item.IsopenSubassembly = false
						})
						this.pageData.serviceMsg = res.rows

					}
				})
				//互动消息
				getInteractMsgList(data).then(res => {
					if (res.code == 200) {
						res.rows.forEach((item, index) => {
							item.index = index
							if (item.showFile) {
								item.showFile = JSON.parse(item.showFile)[0]
							} else {
								item.showFile = ''
							}
						})
						this.pageData.interactMsg = res.rows
					}
				})
				//社团消息
				getClubMsgList(data).then(res => {
					if (res.code == 200) {
						this.pageData.clubMsg = res.rows
					}
				})
			},
			// 同意入团申请
			addClub(id, index) {
				const data = {
					id: id,
					auditResults: 1
				}
				joinClub2(data).then(res => {
					if (res.code == 200) {
						this.pageData.clubMsg[index].status = 1
					}
				})
			}


		},
		onLoad() {},
		onShow() {
			this.getMessageList()
		},
		filters: {
			// 系统消息时间 ,格式化
			changeTime(data) {
				const time = new Date(data)
				const month = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
				const date = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()
				const Hours = data.split(' ')[1].slice(0, 5)
				return `${month}月${date}日 ${Hours}`
			},
			// 服务消息时间格式化
			changeTime1(data) {
				const time = new Date(data)
				const month = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
				const date = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()
				const Hours = data.split(' ')[1].slice(0, 5)
				return `${month}.${date} ${Hours}`
			},
			// 给图片加入图片公共地址
			isImg(data) {
				return data == '/static/images/noneImg.png' ? data : imgUrl + data
			},
			//格式化金额，保留两位小数。
			formatAmount(data) {
				return data.toFixed(2)
			},
			//社团时间格式化
			formatTime(time) {
				let date = new Date(time)
				let hours = date.getHours()
				let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				if (hours < 11) {
					return `上午${hours} : ${minutes}`
				} else if (hours >= 11 && hours <= 13) {
					return `中午${hours} : ${minutes}`
				} else {
					return `下午${hours-12} : ${minutes}`
				}
			}
		}

	}
</script>

<style lang="scss">
	.base {
		margin: 0;
		padding: 0;
		border-top: 2rpx solid rgba(187, 187, 187, 1);
	}



	.classify {
		background-color: white;
	}

	.content {
		height: calc(100vh - 84rpx);

		.content-box {
			height: calc(100vh - 84rpx);

			.inside-box {
				padding: 20rpx 0 1px;
			}
		}

		.u-swipe-action-item__content {
			background-color: #f1f1f1 !important;
		}

		.noMsg {
			width: 750rpx;
			font-size: 40rpx;
			text-align: center;
			margin-top: 40rpx;
			color: #ccc;
		}
	}

	.item1 {
		margin-bottom: 40rpx;

		.msgtime1 {
			width: 100%;
			height: 54rpx;
			color: rgba(154, 154, 154, 1);
			font-size: 24rpx;
			text-align: center;
			font-family: PingFangSC-regular;
		}

		.item-content {
			width: 674rpx;
			border-radius: 16rpx;
			margin: 0 auto;
			padding: 20rpx 34rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 1px solid rgba(187, 187, 187, 1);

			.item-content-title {
				height: 64rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				font-weight: 700;
				font-family: SourceHanSansSC-regular;
			}

			.item-content-content {
				width: 612rpx;
				line-height: 34rpx;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(16, 16, 16, 1);
				font-size: 24rpx;
				font-family: Arial;
			}
		}
	}

	.item2 {
		display: flex;
		position: relative;
		height: 180rpx;
		background-color: rgba(255, 255, 255, 1);
		border-top: 1px solid rgba(187, 187, 187, 1);

		.item2-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin: 20rpx 24rpx 0 42rpx;
		}

		.item2-content {

			.item2-content-name {
				height: 42rpx;
				color: rgba(0, 20, 183, 1);
				font-size: 28rpx;
				font-family: SourceHanSansSC-regular;
				margin-top: 24rpx;

			}

			.item2-content-content {
				height: 34rpx;
				width: 400rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 24rpx;
				font-family: PingFangSC-regular;
				margin-top: 12rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.item2-content-time {
				height: 34rpx;
				margin-top: 14rpx;
				color: rgba(154, 154, 154, 1);
				font-size: 24rpx;
				font-family: PingFangSC-regular;

			}
		}

		.item2-img {
			position: absolute;
			width: 148rpx;
			height: 148rpx;
			top: 20rpx;
			right: 42rpx;

		}
	}

	.item3 {
		width: 672rpx;
		// height: 270rpx;
		margin: 0 auto 20rpx;
		padding: 20rpx 24rpx;
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		font-family: Arial;
		border: 2rpx solid rgba(187, 187, 187, 1);
		font-family: PingFangSC-regular;

		.item3-title {
			height: 62rpx;
			font-weight: 700;
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;

		}

		.item3-date {
			height: 34rpx;
			color: rgba(154, 154, 154, 1);
			font-size: 24rpx;
			margin-bottom: 12rpx;

		}

		.item3-money,
		.item3-explain,
		.item3-name,
		.item3-mode,
		.item3-comment {
			height: 40rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;

		}
	}

	.all-Movement-Content {
		margin-right: 0;
		border-radius: 0;
	}

	.item4 {
		display: flex;
		position: relative;
		height: 180rpx;
		background-color: rgba(255, 255, 255, 1);
		border: 1px solid rgba(187, 187, 187, 1);

		.item4-img {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			margin: 32rpx 28rpx 32rpx 20rpx;
		}

		.item4-content {
			width: 400rpx;
			margin-top: 32rpx;

			.content-title {
				height: 46rpx;
				line-height: 46rpx;
				color: rgba(56, 114, 192, 1);
				font-size: 32rpx;
			}

			.content-join {
				.content-join-apply {
					width: 100%;
					height: 40rpx;
					color: rgba(160, 160, 160, 1);
					font-size: 28rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.agree-button {
					position: absolute;
					top: 44rpx;
					right: 14rpx;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 8rpx;
					background-color: rgba(17, 209, 131, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 28rpx;
					text-align: center;
				}

				.agree-button-click {
					background-color: rgba(160, 160, 160, 1);
				}
			}

			.content-out {
				.content-out-msg {
					height: 46rpx;
					line-height: 46rpx;
					color: rgba(160, 160, 160, 1);
					font-size: 32rpx;
					margin-top: 22rpx;
				}

				.content-out-time {
					position: absolute;
					top: 104rpx;
					right: 48rpx;
					height: 46rpx;
					line-height: 46rpx;
					color: rgba(160, 160, 160, 1);
					font-size: 32rpx;
				}
			}
		}
	}
</style>
